---
import PostCard from '@components/PostCard.astro'
import BaseLayout from '@layouts/BaseLayout.astro'
import { selectPostsByFeatured } from '@utils/astroUtil'

// 获取最新推荐技术文章(最新前五个)
const featuredPosts = (await selectPostsByFeatured())
						.sort((postBef, postAft) => postAft.data.pubDate.valueOf() - postBef.data.pubDate.valueOf())
						.slice(0, 5)
---

<BaseLayout title="不来杯咖啡?">

	<!-- <Dialog visible={ "show" }/> -->
	<div class="base-main">
		<h2 class="post-featur-title">近期推荐</h2>
		<div class="post-featur-list">
			{
				featuredPosts.map(post => (
					<PostCard 
						title={ post.data.title }
						time={ post.data.pubDate }
						tags={ post.data.tags }
						url={ `${post.collection}/${post.slug}` }
						desc={ post.body }>
					</PostCard>
				))
			}
		</div>
	</div>

</BaseLayout>

<style lang="scss">
	.base-main {
		padding-top: 20px;
		.post-featur-title {
			font-weight: 400;
			font-size: var(--fontsSubtit);
			line-height: 1.8;
			color: var(--textColor2);
		}
	}
	@media screen and (max-width: 786px) {

	}
</style>
